<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="1040px"
    class="dialog"
    title="会员记录"
  >
    <div>
      <div class="filter-block">
        <div class="filter-field">
          <el-input
            placeholder="请输入内容"
            v-model="inputValue"
            class="input-with-select"
          >
            <el-select
              v-model="selectValue"
              slot="prepend"
              placeholder="请选择"
            >
              <el-option label="会员卡号" value="memberNumber"></el-option>
              <el-option label="会员卡名称" value="title"></el-option>
              <el-option label="会员等级名称" value="rankName"></el-option>
            </el-select>
            <el-button
              @click="handelSearch"
              slot="append"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </div>
        <div class="filter-field">
          <el-date-picker
            v-model="dataRange"
            type="datetimerange"
            range-separator="-"
            @change="timeChange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          >
          </el-date-picker>
          <el-button @click="getDataList" class="search">查询</el-button>
        </div>
      </div>
      <div class="live-table">
        <el-table :data="lists" style="width: 100%">
          <el-table-column prop="title" label="会员卡名称" min-width="140">
          </el-table-column>
          <el-table-column prop="rankName" label="会员等级" min-width="120">
          </el-table-column>
          <el-table-column prop="openType" label="开卡方式" min-width="120">
            <template slot-scope="scope">
              {{ radioMap[scope.row.openType] }}
            </template>
          </el-table-column>
          <el-table-column prop="openValue" label="开卡条件">
            <template slot-scope="scope">
              {{ scope.row.openValue }}{{scope.row.openType === 1?"元":"积分"}}
            </template>
          </el-table-column>
          <el-table-column prop="memberNumber" label="会员卡号" min-width="200">
          </el-table-column>
          <el-table-column
            prop="memberRegisterTime"
            label="购买时间"
            min-width="180"
          >
          </el-table-column>
          <el-table-column
            prop="memberExpireTime"
            label="有效期"
            min-width="180"
          >
          </el-table-column>
        </el-table>
        <br /><br />
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="pageMap.current"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="pageMap.total"
        >
        </el-pagination>
      </div>
    </div>
    <span slot="footer" class="dialog--footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <!-- <el-button type="primary" @click="onOk">确 定</el-button> -->
    </span>
  </el-dialog>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
import {getMemberRecord} from "@/api/customer/member";
import DateUtil from "@/store/modules/date";

@Component
export default class RenewMember extends Vue {
  dialogVisible = false;

  userId = "";

  /** 筛选字段 */
  dataRange = [];

  selectValue = "memberNumber";

  inputValue = "";

  // 列表数据
  lists = [];

  // 分页数据
  pageMap = {
    total: 0,
    current: 1,
    size: 10,
  };

  // 开卡方式MAP
  radioMap = {
    1: "付费购买",
    2: "积分兑换",
    3: "累计消费金额",
    4: "购买指定商品",
  };

  init(memberInfo) {
    this.userId = memberInfo.userId;
    this.fetchList();
    this.dialogVisible = true;
  }

  handelSearch() {
    this.fetchList({
      page: 1,
      size: 10,
      [this.selectValue]: this.inputValue ? this.inputValue : undefined,
    });
  }

  /* 日期组件参数 */
  // pickerOptions = {
  //   onPick: ({ minDate, maxDate }) => {
  //     if (minDate && maxDate) {
  //       this.fetchList({
  //         page: 1,
  //         size: 10,
  //         becomeMemberStartTime: this.dateConversion(minDate),
  //         becomeMemberEndTime: this.dateConversion(maxDate),
  //       });
  //     }
  //   },
  // };

  timeChange(value) {
    this.dataRange = value || []
    this.fetchList({
      page: 1,
      size: 10,
      becomeMemberStartTime: this.dataRange[0] ? this.dateConversion(this.dataRange[0]) : '',
      becomeMemberEndTime: this.dataRange[1] ? this.dateConversion(this.dataRange[1]) : '',
    });
  }

  getDataList() {
    this.fetchList({
      page: 1,
      size: 10,
      [this.selectValue]: this.inputValue ? this.inputValue : undefined,
      becomeMemberStartTime: Array.isArray(this.dataRange) ? this.dateConversion(this.dataRange[0]) : '',
      becomeMemberEndTime: Array.isArray(this.dataRange) ? this.dateConversion(this.dataRange[1]) : '',
    });
  }

  dateConversion(value) {
    return new DateUtil("").getYMDHMS(value);
  }

  fetchList(params?) {
    if(!params){
      params = {
        page: 1,
        size: 10,
      }
    }
    getMemberRecord({
      ...params,
      shopUserId: this.userId,
    }).then(res => {
      this.lists = res.data.list;
      this.pageMap = {
        total: res.data.total,
        current: res.data.current,
        size: 10,
      };
    });
  }

  /* 列表翻页操作 */
  handleCurrentChange(val) {
    this.fetchList({ page: val, size: 10 });
  }
}
</script>

<style scoped lang="scss">
@include b(filter-block) {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  /deep/.el-input-group__prepend input {
    width: 150px;
  }
  .filter-field:last-child {
    /deep/.input-with-select {
      width: 320px;
      margin: 0 6px;
    }
    width: 430px;
    display: flex;

    .search {
      margin-left: 5px;
    }
  }
}
</style>
